<!-- 列表item -->
<template>
    <view class="view-item view-item-left" @click="viewDynamic">
        <view class="view-item-image">
            <RealAuth v-if="props.dataItem.UserInfo.RealState" />
            <van-image width="100%" fit="cover" class="tu-img" :src="props.dataItem.UserInfo.Avatar"
                style="display:block" />
            <view class="view-item-image-head">
                <view class="view-item-image-head-title"><text>{{ props.dataItem.UserInfo.ShowName }}</text></view>
                <view class="view-item-image-head-ident">
                    <view class="view-item-image-head-ident-item view-item-image-head-ident-item1">
                        <img :src="c05" alt="" v-if="props.dataItem.UserInfo.Sex == 0">
                        <img :src="c06" alt="" v-else>
                        <text>{{ props.dataItem.UserInfo.Age }}</text>
                    </view>
                    <!-- <AuthRole :dataItem="props.dataItem.UserInfo" v-if="props.dataItem.UserInfo.RealState == 1" /> -->
                </view>
            </view>
            <view class="view-item-image-thumbnail">
                <view class="view-item-image-thumbnail-item" v-for="item in props.dataItem.UserInfo.Photos" :key="item.ID">
                    <text v-if="props.dataItem.UserInfo.Photos.length > 5">+{{ props.dataItem.UserInfo.Photos.length -
                        5 }}</text>
                    <van-image width="100%" fit="cover" :src="item.FilePath" />
                </view>
            </view>
        </view>
        <view class="view-item-text">
            <view class="view-item-text-top">
                {{ props.dataItem.UserInfo.CityText }} {{ props.dataItem.UserInfo.Constellation }}
            </view>
            <view class="view-item-text-bottom">
                <view class="view-item-text-bottom-left"
                    :class="OnlineFn(props.dataItem.UserInfo.LastOnline) ? '' : 'view-item-text-bottom-left-noline'">
                    {{ IsOnlineFn(props.dataItem.UserInfo.LastOnline) }}
                </view>
                <view class="view-item-text-bottom-right">
                    <img :src="c03"><text>{{ (props.dataItem.JuLi / 1000).toFixed(1) }}km</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive, ref, getCurrentInstance, onMounted } from "vue"
import c05 from '@/assets/image/icon05.png'
import c06 from '@/assets/image/icon06.png'
import c03 from '@/assets/image/icon03.png'

const state = reactive({
    scrollTop: 0,
    userId: ""
})

// onLoad((o) => {
//     state.userId = o.userId
// })

let props = defineProps({
    dataItem: {
        type: Object,
        default: () => { }
    },
    types: {
        type: Number,
        default: 1
    }
})

const viewDynamic = () => {
    uni.navigateTo({
        url: '/pages/home/person/dynamic/index?tabTypes=1&userId=' + props.dataItem.UserInfo.ID
    })
}

const OnlineFn = (timerNumber) => {
    let num = Date.now() - timerNumber * 1000
        let days = num / ( 60 * 60 * 1000)
        if (days <= 72 ) {
            return true
        }else{
            return false
        }
}

const IsOnlineFn = (timerNumber) => {
    // console.log(props.types,'types')
    // if (props.types == 1) {
    //     return item.IsOnline ? '在线' : '离线'
    // }
    // if (props.types == 2 && item.IsOnline) {
    //     return '在线'
    // }
    // if (props.types == 2 && !item.IsOnline) {
        
        if (timerNumber) {
        let num = Date.now() - timerNumber * 1000
        let days = num / ( 60 * 60 * 1000)
        if (days <= 24) {
            return Math.ceil(days) + '小时前'
        }
        if (24 < days <= 72) {
            return Math.ceil(days / 24) + '天前'
        }
        if(days > 72){
            return '离线'
        }
    }

}


</script>

<style lang="scss" scoped>
.view-item {
    width: calc(100% - 30rpx);
    margin-bottom: 20rpx;
    border-radius: 12rpx 12rpx 0 0;
    overflow: hidden;

    .view-item-image {
        position: relative;
    }

    .view-item-image-head {
        position: absolute;
        bottom: 40rpx;
        margin-left: 16rpx;

        .view-item-image-head-title {
            font-size: 32rpx;
            color: #fff;
            font-weight: 600;

        }

        .view-item-image-head-ident {
            margin-top: 16rpx;
            display: flex;
        }

        .view-item-image-head-ident-item {
            position: relative;
            height: 30rpx;
            margin-right: 10rpx;

            img {
                height: 100%;
                position: absolute;
            }
        }

        .view-item-image-head-ident-item1 {
            width: 60rpx;

            text {
                position: absolute;
                right: 5rpx;
                color: #fff;
                font-size: 20rpx;
            }
        }

        .view-item-image-head-ident-item2 {
            width: 80rpx;
        }
    }

    .view-item-image-thumbnail {
        display: flex;
        position: absolute;
        bottom: 0;
        transform: translateY(50%);
    }

    .view-item-image-thumbnail-item {
        flex: none;
        width: calc(20% - 20rpx);
        height: 50rpx;
        margin-left: 16rpx;
        overflow: hidden;
        position: relative;
        border-radius: 4rpx;

        text {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            z-index: 99;
            text-align: center;
            line-height: 2;
            font-size: 28rpx;
        }
    }

    .view-item-text {
        padding: 40rpx 16rpx 16rpx 16rpx;
        border: 1px solid #ECECEC;
        border-top: none;
        border-radius: 0 0 12rpx 12rpx;

        .view-item-text-top {
            color: #868686;
            font-size: 26rpx;
        }

        .view-item-text-bottom {
            display: flex;
            justify-content: space-between;
            margin-top: 16rpx;

            .view-item-text-bottom-left {
                font-size: 24rpx;

                &::before {
                    display: inline-block;
                    content: "";
                    width: 12rpx;
                    height: 12rpx;
                    border-radius: 16rpx;
                    background: #4FF600;
                    margin-right: 5rpx;
                    position: relative;
                    top:-3rpx;
                }
            }

            .view-item-text-bottom-left-noline {
                color: #ccc;

                &::before {
                    background: #ccc;
                }
            }

            .view-item-text-bottom-right {
                display: flex;
                align-items: center;

                img {
                    width: 28rpx;
                    height: 28rpx;
                }

                text {
                    font-size: 20rpx;
                    color: #868686;
                    display: block;
                    margin-left: 5rpx;
                }
            }
        }
    }
}

.tu-img {
    min-height: 240rpx;
    max-height: 480rpx;
    overflow: hidden;
}

.view-item-auth {
    position: absolute;
    z-index: 999;
    top: 8rpx;
    left: 8rpx;

    img {
        width: 52rpx;
        height: 28rpx;
    }
}</style>
